<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>demo</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <!--
    <script src='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css' rel='stylesheet' />
     -->
    <script src="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/2.4.0/mapbox-gl.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/mapbox-gl/2.4.0/mapbox-gl.css" rel="stylesheet">
    <style>
        body {margin: 0;padding: 0;}
        #map {position: absolute;top: 0;bottom: 0;width: 100%;}
        .info{

            word-break:break-all;
            white-space:normal;
            text-align: left;
            font-weight: bold;
        }
        .info .mapboxgl-popup-content{box-shadow: 0 1px 2px rgba(0,0,0,.9);}
    </style>
</head>
<body>


<div id='map' ></div>
<script>
    const markers = [{
        color: '#ff0000',
        position: [108.937724,34.354122],
        content:"位置1",
        offset: [-10,-20],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [114.057868,22.535256],
        content:"位置2",
        offset: [10,0],
        direction:"left"
    }, {
        color: '#ffffff',
        position: [121.666072,31.073487],
        content:"位置3",
        offset: [10,-20],
        direction:"left"
    }, {
        color: '#ffffff',
        position: [13.782559,53.241914],
        content:"位置4",
        offset: [-10,-20],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [151.107195,-33.80666],
        content:"位置5",
        offset: [-10,-10],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [-124.740278,50.413675],
        content:"位置6",
        offset: [-10,-10],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [-115.243971,32.761748],
        content:"位置7",
        offset: [-10,-10],
        direction:"right"
    }, {
        color: '#ffffff',
        position: [-72.606031,42.087923],
        content:"位置8",
        offset: [10,-10],
        direction:"left"
    }];
    mapboxgl.accessToken = 'pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tyZWN3amRmMXlvNjJwcDhjMmp2dmNhdSJ9.tXwGurJrDL8trPienpr-bg';
    const map = new mapboxgl.Map({
        container: 'map', // container ID
        style: 'mapbox://styles/mapbox/streets-v11', // style URL
        center: [14.212459,24.208158], // starting position [lng, lat]
        zoom: 1,
        maxZoom:5
    });


    markers.forEach(function(marker) {
        // const marker_on = new mapboxgl.Marker({
        //     color: marker.color,
        //     anchor:"center",
        //     draggable: false,
        // }).setLngLat(marker.position)
        //     .addTo(map);

        // const el = marker_on.getElement();
        // el.addEventListener('click', () => {
        //     window.alert(marker.content);
        // });

        const popup = new mapboxgl.Popup({anchor:marker.direction,offset: marker.offset, className: 'info',closeButton:false,closeOnClick:false,maxWidth:'200px'})
            .setLngLat(marker.position)
            .setHTML(marker.content)
            .addTo(map);


    });


</script>
</body>
</html>